<template>
    <view class="container">
        <view class="top">
            <view class="title">
                <view class="text">{{ quesInfo?.question }}</view>
                <view class="iconfont icon-shoucang" @click="addCollect" v-if="!quesInfo?.isCollect"></view>
                <view class="iconfont icon-shoucang-filled" @click="delCollect" v-else></view>
            </view>
            <view class="author">上传人：{{ quesInfo?.userName }}</view>
            <view class="degree">
                <uni-rate readonly :value="quesInfo?.importanceLevel" allowHalf size="15" />
            </view>
        </view>
        <view class="tabs">
            <view :class="'tab-item' + [activeTab === 1 ? ' active' : '']" @click="handleTab(1)">参考答案</view>
            <view :class="'tab-item' + [activeTab === 2 ? ' active' : '']" @click="handleTab(2)">回答区</view>
        </view>
        <view class="content">
            <!-- 参考答案 -->
            <template v-if="activeTab === 1">
                <view class="tip" v-if="!showAnswer">
                    <view>查看答案之前最好先自己回答一遍哦</view>
                    <button class="btn" @click="getAnswer">查看参考答案</button>
                    <view class="tape">
                        <view>去回答区输入你的答案</view>
                    </view>
                </view>
                <view class="answer" v-else>
                    <button class="btn" @click="showAnswer = false">隐藏答案</button>
                    <view class="answer-con">
                        <view class="desc">{{ answerInfo }}</view>
                    </view>
                </view>
            </template>
            <!-- 回答 -->
            <template v-if="activeTab === 2">
                <scroll-view scroll-y class="scroll" v-if="activeTab === 2">
                    <Empty v-if="commentList.length == 0"></Empty>
                    <view class="comment-list">
                        <CustomComment v-for="(item, index) in commentList" :item=item :key="index"
                            @inputComment="inputComment">
                        </CustomComment>
                    </view>
                </scroll-view>
                <!-- 输入框组件 -->
                <CommentInput ref="commentInput" :item2="quesInfo" @sendSuccess="getCommentList">
                </CommentInput>
            </template>
        </view>

        <!-- 收藏列表 -->
        <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff" @change="change">
            <FavoritePop @close="close" @open="open" :folderList="folderList" :id="quesInfo?.id" :module="1">
            </FavoritePop>
        </uni-popup>
        <!-- 新增 -->
        <uni-popup ref="addFolderPop" :mask-click="false">
            <view class="addNewFolder-container">
                <view class="title">新建收藏夹</view>
                <input class="folderName" type="text" placeholder="请输入收藏夹名称" :adjust-position="false"
                    v-model="folderName">
                <view class="footer">
                    <view @tap="hide" class="cancel">取消</view>
                    <view @tap="addFolder" class="confirm">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup lang="ts">
import FavoritePop from '@/components/FavoritePop.vue';
import { API_addFolder, API_getFolder, API_removeCollection } from '@/service/favorite';
import type { DetailArticle, Comment } from '@/type/article';
import { API_giveAlike, API_getComment, API_addComment } from '@/service/article'
import { ref } from 'vue';
import type { Folder } from '@/type/favorite';
import { onLoad } from '@dcloudio/uni-app';
import CustomComment from '@/components/CustomComment.vue';
import CommentInput from '@/components/CommentInput.vue';
import Empty from '@/components/Empty.vue';
import { API_getIntegratedQuestion, API_getIntegrateAnswer, API_addFavorite, API_deleteFavorite } from '@/service/home';
import type { interviewItem, interviewDetail } from '@/type/interview';
const folderList = ref<Folder[]>([]);
const emit = defineEmits(['favoritePopup', 'sendSuccess']);
// 防止滚动穿透
const change = (e: any) => {
    emit('favoritePopup', e.show);
}
// 关闭收藏列表pop
const close = (favorite: boolean | null) => {
    if (favorite != null) {
        quesInfo!.value!.isCollect = favorite;
    }
    popup.value.close();
}
// 打开新建收藏pop
const open = async () => {
    addFolderPop.value.open();
}
// 关闭新建收藏夹列表
const hide = () => {
    addFolderPop.value.close();
}
const addFolderPop = ref<any>("");
const folderName = ref<string>("");
const popup = ref<any>("");
const addFolder = async () => {
    for (let i = 0; i < folderList.value.length; i++) {
        if (folderList.value[i].collectionName === folderName.value) {
            uni.showToast({
                title: '收藏夹名称不能重复',
                icon: 'none',
                mask: true
            })
            return;
        }
    }
    //获取时间戳
    const stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
    // 格式化北京时间为"YYYY-MM-DD HH:mm:ss"
    const beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);

    let res = await API_addFolder({
        collection_name: folderName.value,
        create_time: beijingTime,
        module: 1
    })
    if (res.code === 1) {
        uni.showToast({
            title: '新建成功',
            icon: 'success',
            mask: true
        })
        giveFavorite();

    } else {
        uni.showToast({
            title: '新建失败',
            icon: 'none',
            mask: true
        })
    }
    hide();
    folderName.value = "";
}

const giveFavorite = async () => {
    popup.value.open();
    const res = await API_getFolder(1);
    folderList.value = res.data;
    console.log(res.data);

}
const commentList = ref<Comment[]>([]);
let activeTab = ref<Number>(1);
let showAnswer = ref<Boolean>(false);
//输入框组件
const commentInput = ref<any>();
const quesInfo = ref<interviewDetail>();
const answerInfo = ref<String>('');
const inputComment = (item: Comment) => {
    commentInput.value.replyFocus(item);
}
const getCommentList = async () => {
    const res = await API_getComment(1, interviewId.value);
    commentList.value = res.data;
}
const getIntegratedQuestion = async (id: number) => {
    const res = await API_getIntegratedQuestion(id);
    if (res.code == 1) {
        quesInfo.value = res.data;
    }
}

const handleTab = (val: Number) => {
    activeTab.value = val;
    if (val === 2) {
        getCommentList();
    }
}

const getAnswer = async () => {
    const res = await API_getIntegrateAnswer(quesInfo!.value!.id);
    if (res.data) {
        answerInfo.value = res.data;
        showAnswer.value = true;
    }
}

// 收藏题目
const addCollect = async () => {
    popup.value.open('bottom');
    giveFavorite();
}

// 取消收藏
const delCollect = async () => {
    const res = await API_removeCollection({
        content_id: quesInfo.value!.id,
        module: 1
    })
    if (res.code === 1) {
        uni.showToast({
            title: '取消收藏成功',
            icon: 'none',
            mask: true
        })
        quesInfo.value!.isCollect = false;
    } else {
        uni.showToast({
            title: '取消收藏失败',
            icon: 'none',
            mask: true
        })
    }
}
const interviewId = ref<number>(-1);
onLoad(async (options) => {
    if (options) {
        await getIntegratedQuestion(options.id);
        interviewId.value = options.id;
    }
    await getCommentList();
})

</script>
<style>
page {
    background-color: #fff;
}
</style>
<style scoped lang="scss">
.container {
    background-color: #fff;
}

.top {
    margin: 0 72rpx;
    padding: 34rpx 0;
    border-bottom: 2rpx solid #aaa;

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .text {
            color: #101010;
            font-size: 40rpx;
        }

        .iconfont {}
    }

    .author {
        color: #BBBBBB;
        font-size: 24rpx;
        margin: 20rpx 0;
    }

    .degree {
        display: flex;
        font-size: 28rpx;
    }
}

.tabs {
    display: flex;
    gap: 40rpx;
    margin: 0 72rpx;

    .tab-item {
        color: #BBBBBB;
        font-size: 28rpx;
        padding: 20rpx 8rpx;

        &.active {
            color: $color-main;
            border-bottom: 4rpx solid $color-main;
        }
    }
}

.tip {
    position: relative;
    width: 100%;
    height: calc(100vh - 350rpx);
    color: $color-main;
    font-size: 28rpx;
    text-align: center;
    padding-top: 200rpx;
    box-sizing: border-box;
    overflow: hidden;

    .btn {
        width: 400rpx;
        height: 64rpx;
        line-height: 64rpx;
        font-size: 28rpx;
        border-radius: 64rpx;
        color: #fff;
        text-align: center;
        background-color: $color-main;
        outline: none;
        margin-top: 30rpx;
    }

    .tape {
        position: absolute;
        bottom: 100rpx;
        width: 100%;
        line-height: 40rpx;

        .iconfont {
            margin-bottom: 20rpx;
        }
    }
}

.answer {
    position: relative;
    width: 100%;
    height: calc(100vh - 300rpx);
    box-sizing: border-box;

    .btn {
        position: absolute;
        right: 72rpx;
        top: -66rpx;
        width: 194rpx;
        height: 64rpx;
        line-height: 64rpx;
        font-size: 28rpx;
        border-radius: 64rpx;
        color: #fff;
        text-align: center;
        background-color: $color-main;
        outline: none;
    }

    .answer-con {
        width: 100%;
        height: calc(100% - 40rpx);
        padding: 20rpx 72rpx;
        box-sizing: border-box;
        overflow: hidden auto;

        .desc {
            color: #101010;
            font-size: 28rpx;
            line-height: 42rpx;
            word-break: break-all;
            text-indent: 30rpx;
        }
    }
}

.answer-area {
    position: relative;
    width: 100%;
    height: calc(100vh - 320rpx);
    margin-top: 20rpx;
    padding-bottom: 100rpx;
    overflow: hidden;

    .answer-area-list {
        width: calc(100% - 144rpx);
        height: calc(100% - 96rpx);
        overflow: hidden auto;
        margin: 0 72rpx;

        .answer-area-item {
            padding: 20rpx 0 30rpx 0;
            margin: 0 72rpx;
            font-size: 24rpx;
            color: #AAAAAA;
            border-bottom: 2rpx solid #ccc;

            &:last-child {
                border-bottom: none;
            }

            .user,
            .btm {
                display: flex;
                align-items: center;
            }

            .user {
                color: #101010;

                .avatar {
                    width: 52rpx;
                    height: 52rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }
            }

            .text {
                margin: 30rpx 0;
            }

            .btm {
                justify-content: space-between;
            }
        }
    }

    .comment {
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: #f1f1f1;

        .comment-nav {
            display: flex;
            align-items: center;
            height: 72rpx;
            margin: 14rpx 30rpx;
            padding: 0 20rpx;
            background-color: #fff;
            border-radius: 72rpx;
            font-size: 26rpx;

            .iconfont {
                margin-right: 24rpx;
            }

            .comment-input {
                flex: 1;
            }
        }
    }
}

.comment-list {
    padding: 0 40rpx;
}

.addNewFolder-container {
    position: fixed;
    width: 500rpx;
    left: calc(50vw - 250rpx);
    bottom: calc(50vh);
    border: 1rpx solid #ddd;
    background: #fff;
    border-radius: 10rpx;
    font-size: 30rpx;

    .title {
        padding-top: 30rpx;
        text-align: center;
        font-weight: 700;
    }

    .folderName {
        margin: 30rpx;
        padding: 10rpx;
        border: 1rpx solid #ddd;
        border-radius: 20rpx;
    }

    .footer {
        display: flex;
        // justify-content: space-around;
        // align-items: center;
        border-top: 1rpx solid #ddd;


        .cancel {
            padding: 20rpx 0;
            flex: 1;
            text-align: center;
        }

        .confirm {
            padding: 20rpx 0;
            flex: 1;
            text-align: center;
            border-left: 1rpx solid #ddd;
            color: $color-main;
        }

    }
}

.scroll {
    height: 750rpx;
}
</style>
